<template>
  <div class="home">
    <h2>v-model的使用</h2>
    <model-child v-model="num"></model-child>
    <model-child v-model="num1"></model-child>
    <el-button type="primary" @click="show">show num</el-button>

    <hr>
    <h2>.sync的使用</h2>
    <button @click="decre">sync父中减5</button>
    <sync-child :number.sync="number"></sync-child>

    <el-divider></el-divider>
    <h2></h2>
    <badge-plus :value="12"> <el-button>123</el-button> </badge-plus>

    <hr>
    <h2>测试自己的弹出层 <el-button type="danger" size="mini" @click="showToastHandle">show Toast</el-button></h2>
  </div>
</template>

<script>
import ModelChild from '@/components/model-child'
import SyncChild from '@/components/sync-child'
import BadgePlus from '@/components/badge-plus'
export default {
  name: 'Home',
  data(){
    return{
      num:66,
      num1:88,
      number: 77
    }
  },
  components: {
    ModelChild,
    SyncChild,
    BadgePlus
  },
  methods:{
    decre(){
      this.number -= 5
    },
    show(){
      console.log(this.num, this.num1)
    },
    showToastHandle(){
      this.showToast('what happend')
    }
  },
  watch:{
    num(n){
      console.log('父组件同步->'+n)
    },
    number(n){
      console.log('sync 同步父数据 ->' + n)
    }
  }
}
</script>
